<script setup>
import dayjs from 'dayjs';
import { cloneDeep, find, includes, merge } from 'lodash-es';
import { useRoute } from '@/router/index.js';
import { useRequest, useWatch } from '@/hooks';
import { useGlobalState } from '@/store/globalState.js';
import { useCascaderLink, usePickerOption } from '@/views/hooks.js';
import {
  useOvStatistics,
  useTGChart,
  useDSECRatio,
  useDSECTrend,
  useBuildingECStatics,
  findPNodeAndSiblings,
} from '../hooks.js';
import { getBuildingByArea, getEngTypesByCode, getInsInfo, getTreeData, getDownloadPath } from '@/api/index.js';
import CECharts from '@/components/chart/CECharts.vue';
import TreeSelect from '@/components/TreeSelect.vue';
import DateChart from '@/views/components/DateChart.vue';
import Slider from '@/views/components/Slider.vue';

const emit = defineEmits(['handleRadioChange']);
const fileUrl = useGlobalState().globalState.fileUrl;
const rangeType = ref({
  d: {
    type: 'daterange',
    fmt: 'yyyy-MM-dd',
    default: [dayjs().subtract(30, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')],
    pickerOptions: usePickerOption('d'),
  },
  m: {
    type: 'monthrange',
    fmt: 'yyyy-MM',
    default: [dayjs().subtract(6, 'month').format('YYYY-MM'), dayjs().subtract(1, 'month').format('YYYY-MM')],
    pickerOptions: usePickerOption('m'),
  },
  y: {
    type: 'year',
    fmt: 'yyyy',
    default: [dayjs().subtract(2, 'year').format('YYYY'), dayjs().format('YYYY')],
  },
});
const cePieRef = ref(null);
const buildingSlider = ref(null);
const route = useRoute();
const code = route.query?.TGCode;
const curInstitution = ref(null);
const curInInfo = ref(null);
const type = ref('TG');

const engUnit = ref('tce');
const insParams = ref({
  isStage: '1',
  areaName: null,
  projectType: 'TG',
});
const infoParams = ref({ projectType: 'TG', inId: null });
const etParams = ref({
  enterpriseCode: null,
  projectType: 'TG',
  allType: true,
});
const [institutionList, , runIns] = useRequest(getBuildingByArea, {
  defaultParams: [{}],
  manual: true,
  onSuccess: res => {
    let matchIns;
    if (code) {
      matchIns = find(res.data, v => v.enterpriseCode === code);
    } else {
      matchIns = find(res.data, v => includes(['JCOPERATION', 'OPERATION'], v.entrustStage));
    }
    curInInfo.value = matchIns;
    curInstitution.value = matchIns?.enterpriseCode ?? null;
    chartParams.value.contractType = matchIns?.contractTypeCode ?? null;
  },
});
const [engTypeList, , runEngType] = useRequest(getEngTypesByCode, {
  manual: true,
  onSuccess: res => {
    engUnit.value = res.data[0]?.energyUnit;
  },
});
const [infoData, , runInfo] = useRequest(getInsInfo, {
  manual: true,
  onSuccess: async res => {
    let url;
    if(res.data?.buildingImage){
      url = await getDownloadPath(res.data?.buildingImage);
    }
    buildingImgUrl.value = url?.data?.url ? fileUrl + url?.data?.url : null;
  },
});

const [buildTree, , runTree] = useRequest(getTreeData, {
  manual: true,
  onSuccess: res => {
    buildingList.value = res.data;
  },
});

const staticParams = ref({ inId: null, projectType: 'TG' });
const [staticData, sLoading, runStatic] = useOvStatistics();
const [
  chartParams,
  loading,
  lineExtraOpts1,
  dateRange1,
  yearRange1,
  disabledDateStart1,
  disabledDate1,
  handleDaterange1,
  handleYearrange1,
] = useTGChart(rangeType, engUnit);
const [ratioParams, extraPieOpts, ratioLoading, handleRatioDate] = useDSECRatio(rangeType);
const [
  trendParams,
  dSysList,
  lineExtraOpts,
  dateRangeTr,
  yearRangeTr,
  trendLoading,
  ,
  handleTrDaterange,
  handleTrYearrange,
  handleSysName,
] = useDSECTrend(rangeType);
const [areaECParams, consumeData, ECSDaterange, ECSYearrange, handleECSDaterange, handleECSYearrange] =
  useBuildingECStatics(rangeType, 'TG');
const cascaderRun = () => {
  insParams.value.areaName = cascader.value.join('/');
  runIns(insParams.value);
};
const [cascader, cascaderProps, areaLists, cascaderChange] = useCascaderLink(cascaderRun);
const handleRadioChange = val => emit('handleRadioChange', val);

// 开始时间不能大于结束时间
const disabledDateStartTr = ref({
  disabledDate: time => {
    if (yearRangeTr.value.eYear) {
      return (
        dayjs(time) > dayjs(yearRangeTr.value.eYear) || dayjs(time) < dayjs(yearRangeTr.value.eYear).subtract(2, 'year')
      );
    }
  },
});
const disabledDateStartECS = ref({
  disabledDate: time => {
    if (ECSYearrange.value.eYear) {
      return (
        dayjs(time) > dayjs(ECSYearrange.value.eYear) ||
        dayjs(time) < dayjs(ECSYearrange.value.eYear).subtract(2, 'year')
      );
    }
  },
});
// 结束时间不能小于开始时间
const disabledDateTr = ref({
  disabledDate: time => {
    return dayjs(time) < dayjs(yearRangeTr.value.sYear) || dayjs(time) > dayjs(yearRangeTr.value.sYear).add(2, 'year');
  },
});
const disabledDateECS = ref({
  disabledDate: time => {
    return (
      dayjs(time) < dayjs(ECSYearrange.value.sYear) || dayjs(time) > dayjs(ECSYearrange.value.sYear).add(2, 'year')
    );
  },
});
const buildingList = ref([]);
const showFloor = ref(false);
const showBuilding = ref(true);
const floorBtnText = ref('');
const buildingImgUrl = ref(null);

const handleEntSubChange = async sub => {
  console.log('%c [ sub ]-277', 'font-size:13px; background:pink; color:#bf2c9f;', sub);
  if (sub?.children?.length) {
    buildingList.value = sub.children;
  }
  floorBtnText.value = sub.name;
  areaECParams.value.areaId = sub.id;
  areaECParams.value.isTop = '';
  let url;
  if(sub?.buildingImage){
    url = await getDownloadPath(sub?.buildingImage);
  }
  buildingImgUrl.value = url?.data?.url ? fileUrl + url?.data?.url : null;
  showBuilding.value = false;
  showFloor.value = true;
};
const handleBackBuilding = async () => {
  buildingSlider.value.activeTag = null;
  buildingSlider.value.currentPosition = 0;
  let url;
  if(infoData.value?.buildingImage){
    url = await getDownloadPath(infoData.value?.buildingImage);
  }
  buildingImgUrl.value = url?.data?.url ? fileUrl + url?.data?.url : null;
};
const handleBack = async () => {
  const [tree, node] = findPNodeAndSiblings(buildTree.value, areaECParams.value.areaId);
  if (node) {
    floorBtnText.value = node.name;
    buildingList.value = tree;
    buildingSlider.value.activeTag = node.id;
    areaECParams.value.areaId = node.id;
    areaECParams.value.isTop = '';
    let url;
    if(node?.buildingImage){
      url = await getDownloadPath(node?.buildingImage);
    }
    buildingImgUrl.value = url?.data?.url ? fileUrl + url?.data?.url : null;
  } else {
    buildingList.value = buildTree.value;
    floorBtnText.value = '';
    buildingSlider.value.activeTag = null;
    buildingSlider.value.currentPosition = 0;
    let url;
    if(infoData.value?.buildingImage){
      url = await getDownloadPath(infoData.value?.buildingImage);
    }
    buildingImgUrl.value = url?.data?.url ? fileUrl + url?.data?.url : null;
    showFloor.value = false;
    showBuilding.value = true;
    areaECParams.value.areaId = curInInfo.value.uscc;
    areaECParams.value.isTop = 'yes';
  }
};

const handleInId = val => {
  curInInfo.value = val;
  chartParams.value.contractType = val?.contractTypeCode ?? null;
};
const changeType = item => {
  engUnit.value = item?.energyUnit ?? '';
};

useWatch(areaLists, n => {
  if (n?.length > 0) {
    insParams.value.areaName = cascader.value;
    runIns(insParams.value);
  }
});
useWatch(curInstitution, n => {
  console.log('%c [ n ]-238', 'font-size:13px; background:pink; color:#bf2c9f;', n);
  infoParams.value.inId = n;
  etParams.value.enterpriseCode = n;

  chartParams.value.inId = n;
  ratioParams.value.buildingCode = n;
  trendParams.value.buildingCode = n;

  staticParams.value.inId = n;

  runInfo(infoParams.value);
  runEngType(etParams.value);
  runStatic(staticParams.value);
  runTree({ enterpriseCode: n });

  showFloor.value = false;
  floorBtnText.value = '';
});
useWatch(curInInfo, n => {
  areaECParams.value.inId = n?.enterpriseCode ?? null;
  areaECParams.value.areaId = n?.uscc ?? null;
  areaECParams.value.isTop = 'yes';
});
</script>

<template>
  <div class="app-container overview-adaptive">
    <el-form class="u-df-spb">
      <el-form-item>
        <el-radio-group v-model="type" size="small" @input="handleRadioChange">
          <el-radio-button label="JC">监测</el-radio-button>
          <el-radio-button label="TG">托管</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-form-item label="行政区划" class="u-mr20">
          <el-cascader
            v-model="cascader"
            :props="cascaderProps"
            :options="areaLists"
            placeholder="请选择行政区划"
            size="small"
            style="width: 200px"
            clearable
            @visible-change="cascaderChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="机构名称">
          <el-select
            v-model="curInstitution"
            value-key="institutionCode"
            placeholder="请选择机构名称"
            filterable
            size="small"
            style="width: 200px"
            class="entList-select"
          >
            <el-option
              v-for="(val, index) in institutionList"
              :key="`${val.enterpriseCode}-${index}`"
              :label="val.enterpriseName"
              :value="val.enterpriseCode"
              :title="val.enterpriseName"
              @click.native="handleInId(val)"
            >
              <span>{{ val.enterpriseName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
    </el-form>
    <div class="u-df-st u-mt10 u-mb20 u-fs12 u-sec-text">
      <div class="u-prim-text u-fs20 u-fw-b">{{ infoData?.inName ?? '--' }}</div>
      <i class="u-ml20 u-mr5 el-icon-location-outline"></i>
      <span>地址：{{ infoData?.inAddress ?? '--' }}</span>
      <i class="u-ml20 u-mr5 el-icon-tickets"></i>
      <span>托管类型：{{ infoData?.projectContractName ?? '-' }}</span>
      <i class="u-ml20 u-mr5 el-icon-date"></i>
      <span>托管年限：{{ `${infoData?.startTime ?? ''} ~ ${infoData?.endTime ?? ''}` }}</span>
      <i class="u-ml20 u-mr5 el-icon-time"></i>
      <span>投运时间：{{ infoData?.runTime ?? '--' }}</span>
    </div>
    <div class="u-clamp u-fs14 u-reg-text" style="height: 38px" :title="infoData?.introduce ?? '--'">
      {{ infoData?.inIntroduce ?? '--' }}
    </div>
    <div class="overview-bottom-wrapper">
      <div class="u-df-st u-mb20 u-mt30">
        <ul class="u-df-st u-br-4" style="margin-right: 1.5vw">
          <li
            class="u-base-fg u-engDataItem u-prim-text"
            :style="{ backgroundColor: item.key === '累计能耗(tce)' ? '#ff9900' : '' }"
            v-for="item in staticData?.energyConsumption ?? []"
            :key="item.key"
          >
            <span class="u-fs14 u-reg-text" :style="item.key === '累计能耗(tce)' ? { color: '#fff' } : null">
              {{ item.key }}
            </span>
            <div class="u-engAmount" :style="{ color: item.key !== '累计能耗(tce)' ? '#ff9900' : '' }">
              {{ item.value ?? '--' }}
            </div>
          </li>
        </ul>
        <ul class="u-df-st u-br-4" style="margin-right: 1.5vw">
          <li
            class="u-base-fg u-engDataItem"
            :style="{ backgroundColor: item.key === '累计节能(tce)' ? '#3adb40' : '' }"
            v-for="item in staticData?.energyConservation ?? []"
            :key="item.key"
          >
            <span class="u-fs14 u-reg-text" :style="item.key === '累计节能(tce)' ? { color: '#fff' } : null">
              {{ item.key }}
            </span>
            <div class="u-engAmount" :style="{ color: item.key !== '累计节能(tce)' ? '#3adb40' : '' }">
              {{ item.value ?? '--' }}
            </div>
          </li>
        </ul>
        <ul class="u-df-st u-br-4">
          <li
            class="u-base-fg u-engDataItem"
            :style="{ backgroundColor: item.key === '项目收益 (元)' ? '#f00' : '' }"
            v-for="item in staticData?.income ?? []"
            :key="item.key"
          >
            <span class="u-fs14 u-reg-text" :style="item.key === '项目收益 (元)' ? { color: '#fff' } : null">
              {{ item.key }}
            </span>
            <div class="u-engAmount" :style="{ color: item.key !== '项目收益 (元)' ? '#f00' : '' }">
              {{ item.value ?? '--' }}
            </div>
          </li>
        </ul>
      </div>
      <div class="u-df-st u-w100 overview-bottom">
        <div class="chart-container u-base-fg u-h100">
          <el-form :model="chartParams" :inline="true" class="u-df-ed chart-container-form">
            <el-form-item prop="energyType" class="u-mr10">
              <el-select
                v-model="chartParams.energyType"
                placeholder=""
                size="mini"
                class="u-mr10"
                style="width: 120px"
              >
                <el-option
                  v-for="item in engTypeList"
                  :key="item.id"
                  :label="item.energyName + '能耗'"
                  :value="item.id"
                  @click.native="changeType(item)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="rangeType[chartParams.dateType].type !== 'year'">
              <el-date-picker
                v-model="dateRange1"
                :type="rangeType[chartParams.dateType].type ?? 'daterange'"
                :key="rangeType[chartParams.dateType].type ?? 'daterange'"
                :value-format="rangeType[chartParams.dateType].fmt ?? 'yyyy-MM-dd'"
                :picker-options="rangeType[chartParams.dateType].pickerOptions"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="mini"
                align="left"
                class="u-mr10"
                style="width: 240px"
                @change="handleDaterange1"
              />
            </el-form-item>
            <el-form-item v-else>
              <el-date-picker
                v-model="yearRange1.sYear"
                :picker-options="disabledDateStart1"
                :clearable="false"
                type="year"
                value-format="yyyy"
                placeholder="开始年份"
                size="mini"
                style="width: 115px"
                class="u-mr5"
                @change="handleYearrange1"
              />
              <el-date-picker
                v-model="yearRange1.eYear"
                :picker-options="disabledDate1"
                :clearable="false"
                type="year"
                value-format="yyyy"
                placeholder="结束年份"
                size="mini"
                class="u-mr10"
                style="width: 115px"
                @change="handleYearrange1"
              />
            </el-form-item>
            <el-form-item prop="dateType" style="margin-right: 0 !important">
              <el-radio-group v-model="chartParams.dateType" size="mini">
                <el-radio-button label="d">日</el-radio-button>
                <el-radio-button label="m">月</el-radio-button>
                <el-radio-button label="y">年</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <CECharts v-loading="loading" :options="lineExtraOpts1" type="line" />
        </div>
        <div class="subEnt-container u-h100">
          <el-form :model="areaECParams" class="subEnt-container-form u-df-ed u-mb5" inline>
            <el-form-item>
              <el-form-item v-if="rangeType[areaECParams.dateType].type !== 'year'">
                <el-date-picker
                  v-model="ECSDaterange"
                  :type="rangeType[areaECParams.dateType].type ?? 'daterange'"
                  :key="rangeType[areaECParams.dateType].type ?? 'daterange'"
                  :value-format="rangeType[areaECParams.dateType].fmt ?? 'yyyy-MM-dd'"
                  :picker-options="rangeType[areaECParams.dateType].pickerOptions"
                  :clearable="false"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  size="mini"
                  align="left"
                  style="width: 240px"
                  @change="handleECSDaterange"
                />
              </el-form-item>
              <el-form-item v-else>
                <el-date-picker
                  v-model="ECSYearrange.sYear"
                  :picker-options="disabledDateStartECS"
                  :clearable="false"
                  type="year"
                  value-format="yyyy"
                  placeholder="开始年份"
                  size="mini"
                  style="width: 115px; line-height: 28px"
                  class="u-mr5"
                  @change="handleECSYearrange"
                />
                <el-date-picker
                  v-model="ECSYearrange.eYear"
                  :picker-options="disabledDateECS"
                  :clearable="false"
                  type="year"
                  value-format="yyyy"
                  placeholder="结束年份"
                  size="mini"
                  style="width: 115px; line-height: 28px"
                  @change="handleECSYearrange"
                />
              </el-form-item>
            </el-form-item>
            <el-form-item prop="dateType" class="u-df-ct">
              <el-radio-group v-model="areaECParams.dateType" size="mini">
                <el-radio-button label="d">日</el-radio-button>
                <el-radio-button label="m">月</el-radio-button>
                <el-radio-button label="y">年</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <img v-show="buildingImgUrl" class="subEnt-img" :src="buildingImgUrl" alt="" />
          <div v-show="!buildingImgUrl" class="u-df-ct u-fd-col subEnt-img subEnt-noPic">
            <img src="@/assets/images/no_pic.png" alt="" class="u-mb10" />
            <span class="u-fs14">当前层级未上传图片</span>
          </div>
          <Slider ref="buildingSlider" :list="buildingList" class="subEnt-carousel" @handleClick="handleEntSubChange" />
          <el-button
            v-show="showBuilding && infoData?.inName"
            type="primary"
            class="subEnt-floorBtn"
            @click="handleBackBuilding"
          >
            {{ infoData?.inName }}
          </el-button>
          <el-button v-show="showFloor" type="primary" class="subEnt-floorBtn" icon="el-icon-back" @click="handleBack">
            {{ floorBtnText }}
          </el-button>
          <ul class="u-df-ct subEnt-consumeList">
            <li v-for="item in consumeData" :key="item.key" class="u-df-spb u-base-fg u-prim-text">
              <span>{{ item.key }}</span>
              <span class="u-ml10 u-fs18 u-fw-b">{{ item.value ?? '--' }}</span>
            </li>
          </ul>
        </div>
        <ul class="deviceSysEC-wrapper u-ml20 u-h100">
          <li class="u-base-fg u-mb20">
            <div class="u-fs16 u-fw-b u-mb10">设备系统用电能耗占比</div>
            <DateChart
              ref="cePieRef"
              class="chart-box"
              :loading="ratioLoading"
              :type="'pie'"
              :chartOptions="{}"
              :extraOpts="extraPieOpts"
              @handleDateParams="handleRatioDate"
            />
          </li>
          <li class="u-base-fg">
            <div class="u-df-spb u-mb10">
              <span class="u-fs16 u-fw-b">设备系统用电能耗趋势</span>
            </div>
            <el-form :model="trendParams" :inline="true" class="u-df-spb ds-form">
              <el-form-item prop="energyType" class="u-mr10">
                <TreeSelect
                  v-model="trendParams.equSysName"
                  :data="dSysList ?? []"
                  placeholder="请选择设备系统"
                  size="mini"
                  style="width: 190px"
                  clearable
                />
              </el-form-item>
              <el-form-item>
                <el-form-item v-if="rangeType[trendParams.dateType].type !== 'year'">
                  <el-date-picker
                    v-model="dateRangeTr"
                    :type="rangeType[trendParams.dateType].type ?? 'daterange'"
                    :key="rangeType[trendParams.dateType].type ?? 'daterange'"
                    :value-format="rangeType[trendParams.dateType].fmt ?? 'yyyy-MM-dd'"
                    :picker-options="rangeType[trendParams.dateType].pickerOptions"
                    :clearable="false"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini"
                    align="left"
                    style="width: 220px"
                    @change="handleTrDaterange"
                  />
                </el-form-item>
                <el-form-item v-else>
                  <el-date-picker
                    v-model="yearRangeTr.sYear"
                    :picker-options="disabledDateStartTr"
                    :clearable="false"
                    type="year"
                    value-format="yyyy"
                    placeholder="开始年份"
                    size="mini"
                    style="width: 110px"
                    @change="handleTrYearrange"
                  />
                  <el-date-picker
                    v-model="yearRangeTr.eYear"
                    :picker-options="disabledDateTr"
                    :clearable="false"
                    type="year"
                    value-format="yyyy"
                    placeholder="结束年份"
                    size="mini"
                    style="width: 110px"
                    @change="handleTrYearrange"
                  />
                </el-form-item>
                <el-form-item prop="dateType" class="u-df-ct">
                  <el-radio-group v-model="trendParams.dateType" size="mini">
                    <el-radio-button label="d">日</el-radio-button>
                    <el-radio-button label="m">月</el-radio-button>
                    <el-radio-button label="y">年</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-form-item>
            </el-form>
            <CECharts v-loading="trendLoading" type="line" :options="lineExtraOpts" style="height: calc(100% - 54px)" />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.overview-adaptive {
  display: flex;
  flex-direction: column;
}
.overview-bottom-wrapper {
  flex: 1;
  height: 0;
  overflow-x: auto;
}
.overview-bottom {
  height: calc(100% - 120px);
  > div {
    flex-shrink: 0;
    white-space: nowrap;
  }
  > ul {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
.chart-container {
  box-sizing: border-box;
  width: 35%;
  position: relative;
  &-form {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 999;
  }
}
.subEnt-container {
  box-sizing: border-box;
  width: calc(58% - 35px);
  margin-left: 35px;
  overflow-y: auto;
  position: relative;
  .subEnt-img {
    width: 100%;
    height: calc(100% - 50px);
    margin-top: 5px;
    > span {
      white-space: pre-wrap;
    }
  }
  .subEnt-noPic {
    background: url('~@/assets/images/no_pic_bg.png') center/100% 100% no-repeat;
  }
  .subEnt-carousel {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
  }
  .subEnt-floorBtn {
    // width: 120px;
    height: 40px;
    position: absolute;
    top: 25%;
    right: 30px;
    transform: translateY(-25%);
  }
  .subEnt-consumeList {
    width: 100%;
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    > li {
      height: 40px;
      padding: 0 15px;
      margin-right: 20px;
      border-radius: 4px;
      font-size: 14px;
      > span:last-of-type {
        color: #3adb40;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
      }
    }
    > li:last-of-type {
      margin-right: 0;
    }
  }
  ::v-deep(.el-tabs__header) {
    margin: 0;
  }
}
.deviceSysEC-wrapper {
  width: 35%;
  > li {
    padding: 13px 15px;
    height: calc(50% - 10px);
    > div:first-of-type {
      height: 16px;
      line-height: 16px;
    }
    .chart-box {
      height: calc(100% - 26px);
    }
  }
}
.ds-form {
  ::v-deep(.el-form-item__content) {
    height: 28px;
    line-height: 28px;
  }
}
.u-mt30 {
  margin-top: 30px;
}
.u-clamp {
  line-height: 19px;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
}
.u-br-4 {
  border-radius: 4px;
}
.u-engDataItem {
  height: 70px;
  padding: 10px 15px;
  min-width: 14.5vw;
  > span {
    display: block;
    height: 16px;
    line-height: 16px;
  }
  &:first-of-type {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  &:last-of-type {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.u-engAmount {
  height: 30px;
  line-height: 30px;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  margin-top: 4px;
}
::v-deep .el-form-item {
  margin-bottom: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-form-item__content {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 28px;
    // line-height: 28px;
  }
}
::v-deep .el-radio-button--mini .el-radio-button__inner {
  padding: 6px 8px;
  height: 28px !important;
  margin-right: 3px;
  border-radius: 0;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}
.entList-select ::v-deep .el-select-dropdown__item {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entList-select ::v-deep .el-select-dropdown {
  width: 100%;
}
</style>
